<template>
  <Dropdown class="collased-menu-dropdown" transfer placement="right-start" @on-click="handleClick">
    <a class="drop-menu-a" type="text">
      <Icon :type="parentItem.meta.icon"/>
    </a>
    <DropdownMenu slot="list">
      <template v-for="child in children">
        <!-- <collapsed-menu v-if="showChildren(child)" :icon-size="iconSize" :parent-item="child" :key="`drop-${child.id}`"></collapsed-menu> -->
        <DropdownItem :key="`drop-${child.id}`" :name="child.name">
          <span class="menu-title">{{ showTitle(child) }}</span>
        </DropdownItem>
      </template>
    </DropdownMenu>
  </Dropdown>
</template>
<script>
import mixin from './mixin'
import itemMixin from './item-mixin'

export default {
  name: 'CollapsedMenu',
  mixins: [ mixin, itemMixin ],
  props: {
    hideTitle: {
      type: Boolean,
      default: false
    },
    rootIconSize: {
      type: Number,
      default: 16
    }
  },
  data () {
    return {
      placement: 'right-end'
    }
  },
  methods: {
    handleClick (name) {
      this.$emit('on-click', name)
    },
    handleMousemove (event, children) {
      const { pageY } = event
      const height = children.length * 38
      const isOverflow = pageY + height < window.innerHeight
      this.placement = isOverflow ? 'right-start' : 'right-end'
    }
  }
}
</script>
